<template>
  <div class="info">
    <div class="nave">
      <van-nav-bar>
        <template #right>
          <div class="baocun" @click="mysave">
            保存
          </div>
        </template>
        <template #title>
          <div class="title">个人信息</div>
        </template>
        <template #left>
          <van-icon
            class="icon"
            name="arrow-left"
            color="#fff"
            @click="$router.push('/my')"
          />
        </template>
      </van-nav-bar>
    </div>
    <div class="message">
      <van-cell-group class="gai">
        <van-cell title="头像" is-link @click="showPopup">
          <template #default>
            <img v-if="myPic" class="myimg" :src="myPic" alt="" />
            <img
              v-else
              class="myimg"
              src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1475145437,2222814895&fm=26&gp=0.jpg"
              alt=""
            />
          </template>
        </van-cell>
      </van-cell-group>
      <van-cell-group class="gai">
        <van-cell
          title="昵称"
          is-link
          :value="value"
          center
          @click="nickname"
        />
      </van-cell-group>
      <van-cell-group class="gai">
        <van-cell title="介绍" is-link :value="message" @click="introduce" />
      </van-cell-group>
      <van-cell-group class="gai">
        <van-cell title="性别" is-link :value="mygender" @click="gender" />
      </van-cell-group>
      <van-cell-group class="gai">
        <van-cell
          title="生日"
          is-link
          :value="currentDate | dataFormat"
          @click="birthday"
        />
      </van-cell-group>
    </div>
    <!-- 头像面板 -->
    <div class="frame">
      <van-popup v-model="show" class="box">
        <div class="photo" @click="photoshow">从相册中选择</div>
        <div class="takephoto">拍照</div>
        <div class="cancel" @click="show = false">取消</div>
      </van-popup>
    </div>
    <!-- 选择照片 -->
    <van-popup v-model="myshow" class="boxone">
      <van-uploader :after-read="afterRead" v-model="fileList" :max-count="1">
      </van-uploader>
    </van-popup>
    <!-- 修改昵称 -->
    <!-- <van-cell is-link @click="showPopup">展示弹出层</van-cell> -->
    <van-popup v-model="nameshow" position="bottom">
      <van-cell-group>
        <van-field v-model="value" />
      </van-cell-group>
    </van-popup>
    <!-- 介绍面板 -->
    <van-popup v-model="introduceshow" class="wenben">
      <van-field
        v-model="message"
        type="textarea"
        maxlength="50"
        placeholder="请输入个性签名"
        show-word-limit
      />
    </van-popup>
    <!-- 性别面板 -->
    <van-popup v-model="genderShow" position="bottom">
      <van-picker
        show-toolbar
        :columns="genderData"
        :default-index="mygender"
        @confirm="updateGender"
        @cancel="genderShow = false"
      />
    </van-popup>
    <!-- 生日面板 -->
    <van-popup v-model="birthdayShow" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="savedate"
        @cancel="birthdayShow = false"
      />
    </van-popup>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { userinfomyApi, mysaveApi, dialogApi } from '../../api/myApi.js'
import moment from 'moment'
import 'moment/locale/zh-cn' // 引入中文
export default {
  name: 'my',
  async created () {
    this.id = this.userInfo.id.c.join('')
    const res = await userinfomyApi(this.id)
    console.log(res)
    this.userinfolist = res.data
    this.value = this.userInfo.name
    this.message = res.data.intro
    this.currentDate = this.userInfo.birthday
    this.myPic = this.userInfo.photo
    this.mygender = this.genderData[this.userInfo.gender]
  },
  computed: {
    ...mapState(['userInfo'])
  },
  data () {
    return {
      myPic: '',
      id: '',
      fileList: [],
      show: false,
      myshow: false,
      nameshow: false,
      value: '',
      introduceshow: false,
      genderShow: false,
      genderData: ['男', '女'],
      birthdayShow: false,
      message: '',
      minDate: new Date(1994, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: '',
      mygender: '',
      genderList: { 男: 0, 女: 1 }
    }
  },
  methods: {
    async mysave () {
      this.currentDate = moment(this.currentDate).format('YYYY-MM-DD')
      console.log(this.mygender, this.genderList[this.mygender])
      const res = await mysaveApi({
        name: this.value,
        photo: this.mypic,
        gender: this.genderList[this.mygender],
        birthday: this.currentDate,
        intro: this.message
      })
      console.log(res)
      this.$toast.success('保存成功')
      this.$router.push('/my')
    },
    savedate () {
      this.birthdayShow = false
    },
    birthday () {
      this.birthdayShow = true
    },
    updateGender (value, index) {
      this.genderShow = false
      this.$toast.loading('正在加载...')
      this.mygender = this.genderData[index]

      this.$toast.success('修改成功')
    },
    gender () {
      this.genderShow = true
    },
    introduce () {
      this.introduceshow = true
    },
    nickname () {
      this.nameshow = true
    },
    afterRead (file) {
      // 此时可以自行将文件上传至服务器
      console.log(file)
      this.$dialog
        .confirm({
          title: '是否设置图片为用户图像'
        })
        .then(() => {
          dialogApi(file.file).then(res => {
            console.log('上传成功')
            // this.value = res.data[0].id
            console.log(res.data.photo)
            this.myPic = res.data.photo
            this.show = false
            this.myshow = false
            this.$toast.success('上传头像成功')
            console.log(res)
          })
        })
        .catch(() => {
          console.log('上传失败')
        })
      console.log(file)
    },
    photoshow () {
      this.myshow = true
    },
    showPopup () {
      this.show = true
    }
  }
}
</script>

<style lang="less" scoped>
.info {
  .nave {
    /deep/ .van-nav-bar__content {
      background-color: #419efa;
    }
    .baocun {
      color: #fff;
      font-size: 16px;
    }
    .title {
      color: #fff;
    }
    .icon {
      font-size: 20px;
    }
  }
  .message {
    .gai {
      margin-bottom: 1px;
      padding: 0px 15px;
      height: 50px;
      border-bottom: 1px solid #ddd;
      .myimg {
        height: 30px;
        width: 30px;
        border-radius: 50%;
      }
    }
  }
  .frame {
    .box {
      height: 150px;
      width: 300px;
      border-radius: 10px;
      .photo {
        font-size: 16px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        border-bottom: 1px solid #ddd;
      }
      .takephoto {
        font-size: 16px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        border-bottom: 1px solid #ddd;
      }
      .cancel {
        font-size: 16px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        border-bottom: 1px solid #ddd;
      }
    }
  }
  .boxone {
    height: 200px;
    width: 300px;
    text-align: center;
    line-height: 200px;
  }
  .wenben {
    height: 100px;
    width: 300px;
    // color: #ccc;
  }
}
</style>
